<template>
  <div class="test2">
    <div v-for="(item,index) in list" class="add">
      <p><input v-model="item.username"/></p>
      <p @click="add">添加</p>
    </div>
    <ul style="margin-top: 20px">
      <li :class="{'active-tab': active==index }" v-for="(item,index) in tabList" @click="tabClick(index)">1</li>
    </ul>

    <swiperbar
      v-for="(item,index) in tabList"
      :key="item.id"
      :text="item.text"
      :index="index"
      @delIndex="getFromChild"
    ></swiperbar>

  </div>
</template>
<script>
  import swiperbar from './swiperbar';
  export default {
    data() {
      return {
        list: [{
          username: '222'
        }],
        tabList: [
          {text: "选项一",id:1},
          {text: "选项二",id:2},
          {text: "选项三",id:3}
        ],
        active: 0,
      }
    },
    methods: {

      add() {
        this.list.push({
          username: '333'
        })
      },
      tabClick(index) {
        this.active = index;
        this.initData()
      },
      initData() {
        console.log(this.active);
      },
      getFromChild(n){
        this.tabList.splice(n,1);
      }
    },
    mounted() {
      this.initData();
    },
    components:{
      swiperbar
    }
  }
</script>
<style>
  .active-tab {
    background: yellow;
  }

  .test2 {
  }

  .add:nth-of-type(3) p:nth-of-type(2) {
    color: yellow;
  }


</style>
